<template>
  <div style="padding: 14px 0; display: flex">
    <div>
      <div
        style="
          width: 50px;
          height: 50px;
          border-radius: 5px;
          background-color: #1890ff;
          display: block;
          position: relative;
          text-align: center;
        "
      >
        <!--头像-->
        <div
          style="font-size: 30px; color: white; line-height: 50px"
          @click="count++"
        >
          {{ data.USR_Name ? data.USR_Name.substring(0, 1) : '' }}
        </div>
        <!--状态图标-->
        <i
          :class="getIcon()"
          style="
            background-color: white;
            color: green;
            position: absolute;
            right: -5px;
            bottom: -5px;
            border-radius: 10px;
            border: 3px white solid;
          "
          :style="{
            'background-color': data.FSO_IsChecked ? 'white' : 'orange',
            color: data.FSO_IsChecked ? 'black' : 'white',
          }"
        ></i>
      </div>
      <!--连线-->
      <div
        v-if="!isLast"
        style="
          height: 100%;
          background-color: #ccc;
          width: 3px;
          margin-left: 24px;
          margin-top: 1px;
        "
      ></div>
    </div>
    <div style="padding-left: 20px">
      <div v-if="count > 8">{{ data }}</div>
      <!--内容-->
      <div
        style="display: flex; padding-left: 0px; justify-content: space-between"
      >
        <div>{{ data.FRS_Name }}</div>
        <i
          class="el-icon-delete"
          v-if="data.FSO_OperateType == 50 && data.FSO_EmpID == empId"
          @click="deleteComment(data.FSO_ID)"
        ></i>
        <div style="color: #888">{{ data.FSO_CheckTime }}</div>
      </div>
      <div style="color: #888; margin-top: 5px">
        {{ data.USR_Name }} {{ data.OperateTypeDesc }}
      </div>
      <div style="display: flex; min-height: 30px; margin-top: 5px">
        <div class="detail-detail">
          {{ data.FSO_Comment }}
        </div>
      </div>
      <div v-if="data.Files">
        <div v-for="file in data.Files" :key="file.FSOF_ID">
          <div style="display: flex; align-items: center">
            <el-image
              class="image"
              :src="
                picExts.indexOf(file.FL_Extension) == -1
                  ? require('@/assets/file.png')
                  : fileURL + file.FL_SrcPath
              "
              :preview-src-list="
                picExts.indexOf(file.FL_Extension) == -1
                  ? null
                  : [fileURL + file.FL_SrcPath]
              "
              @click="
                () => {
                  if (file.FL_HtmlPath) {
                    htmlPath = fileURL + file.FL_HtmlPath
                    previewVis = true
                  } else {
                    downloadFile(file)
                  }
                }
              "
            />
            {{ file.FL_Name }}
          </div>
        </div>
      </div>
    </div>
    <van-popup
      v-model="previewVis"
      closeable
      position="bottom"
      style="width: 100%; height: 92%; overflow: hidden"
    >
      <iframe
        :src="htmlPath"
        style="height: 100%;width:100%; frameborder=no"
        frameborder="no"
        border="0"
        marginWidth="0"
        marginHeight="0"
      ></iframe>
    </van-popup>
  </div>
</template>
<script>
import { baseURL, fileRoot } from '@/config'
import { deleteComment } from '@/api/flowCenter/form/formProcess'
export default {
  props: ['isLast', 'data'],
  data: function () {
    return {
      picExts: ['.bmp', '.jpg', '.png', '.jpeg', '.gif'],
      fileURL: baseURL + fileRoot,
      previewVis: false,
      count: 0,
      empId: 0,
    }
  },
  methods: {
    downloadFile(file) {
      var a = document.createElement('a')
      a.setAttribute('download', file.FL_Name)
      a.setAttribute('href', this.fileURL + file.FL_SrcPath)
      a.click() // 设置点击事件
    },
    getIcon() {
      switch (this.data.FSO_OperateType) {
        case 10:
          return 'el-icon-check'
        case 20:
          return 'el-icon-close'
        case 30:
          return 'el-icon-top'
        case 40:
          return 'el-icon-user-solid'
        case 50:
          return 'el-icon-more'
        case 60:
          return 'el-icon-goods'
      }
    },
    deleteComment(id) {
      this.$confirm(`是否撤回该评论？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          deleteComment(id).then(() => {
            this.$router.go(0)
          })
        })
        .catch(() => {
          return
        })
    },
  },
  mounted: function () {
    this.empId = this.$store.getters['user/curEmp'].EMP_ID
  },
}
</script>

<style scoped>
.step-name {
  font-size: 16px;
  width: 150px;
  line-height: 30px;
}
.detail-title {
  font-size: 16px;
}
.detail-detail {
  width: 300px;
  font-size: 16px;
  word-wrap: break-word;
  word-break: normal;
}
.image {
  margin: 5px;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
</style>